<!--
    HomeGoodsCell.vue
    gree_ctm

    Created by 汪明 on 15:44.
 -->
<template>
    <view class="HomeGoodsCell">
        <template v-for="(item,index) in list"  :key="index" >
            <u-waterfall v-model="item.homeRecommendProductVOList" v-show="index == selectIndex">
                <template v-slot:left="{leftList}">
                    <view style="padding-left: 12px;padding-right: 6px" v-for="(item,index) in leftList" :value="item"
                          :key="index">
                        <GoodsView :value="item"></GoodsView>
                    </view>
                </template>
                <template v-slot:right="{rightList}">
                    <view style="padding-left: 6px;padding-right: 12px" v-for="(item,index) in rightList" :value="item"
                          :key="index">
                        <GoodsView :value="item"></GoodsView>
                    </view>
                </template>
            </u-waterfall>
        </template>
    </view>
</template>

<script lang="ts">
import GoodsView from "@/components/GoodsView.vue";
import UWaterfall from "vk-uview-ui/components/u-waterfall/u-waterfall.vue"
import {defineComponent} from 'vue'
import type {PropType} from 'vue'
import type {Goods, Recommend} from "@/Types/HomeTypes";
export default defineComponent({
    components: {
        GoodsView, UWaterfall
    },
    props: {
        value: {
            type: Object as PropType<Recommend>,
            required: true
        },
        list:{
            type: Object as PropType<Recommend[]>,
            required: true
        },
        selectIndex:Number
    },
    setup(props, content) {
        
        return {}
    },
    options: {
        //为了让样式穿透在微信小程序生效
        styleIsolation: "shared"
    }
})
</script>

<style scoped lang="scss">
.HomeGoodsCell {
  width: 100vw;
  height: auto;
  min-height: 100vh;

  :deep(.u-column) {
    width: 50%;
  }
}
</style>
